<template>
    <div>
        <div class="vs-table-box" v-loading="loading">
            <el-form
                label-position="right"
                ref="ruleForm"
                :rules="rules"
                class="vs--info"
                label-width="110px"
                :model="ruleForm"
                inline
            >
                <div class="form-top">
                    <div>
                        <h3>{{ title }}</h3>
                        <el-form-item label="顾客姓名" prop="username">
                            <el-input
                                v-model="ruleForm.username"
                                :readonly="type == 2"
                                placeholder=""
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="性别" prop="gender">
                            <el-radio-group
                                :disabled="type == 2"
                                v-model="ruleForm.gender"
                            >
                                <el-radio :label="1">男</el-radio>
                                <el-radio :label="2">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="手机号码" prop="phone">
                            <el-input
                                v-model="ruleForm.phone"
                                @blur="phoneBlur"
                                :readonly="type == 2"
                                placeholder=""
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="会员号" prop="code">
                            <el-input :value="user.vip_no" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="剩余金额" prop="code">
                            <el-input
                                :value="(user.balance || '0') + '元'"
                                readonly
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="客户人数" prop="code">
                            <el-input
                                v-model.number="ruleForm.user_num"
                                onblur="value<=0?value=1:''"
                                :readonly="type == 2"
                            ></el-input>
                        </el-form-item>
                    </div>
                </div>

                <div class="project-list">
                    <div v-for="(item, i) in ruleForm.projects" :key="i">
                        <h3 class="no-line">项目信息{{ i + 1 }}</h3>
                        <div style="display: flex; flex-wrap: wrap">
                            <el-form-item
                                label="项目名称"
                                :rules="{
                                    required: true,
                                    message: '请选择项目',
                                    trigger: 'change',
                                }"
                                :prop="'projects.' + i + '.id'"
                            >
                                <el-select
                                    v-model="item.id"
                                    :disabled="type == 2"
                                    filterable
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="val in projectList"
                                        :key="val.id"
                                        :label="val.name"
                                        :value="val.id"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <!-- <el-form-item
                    label="房间号"
                    :rules="{
                    required: true,
                    message: '请选择房间号',
                    trigger: 'change',
                    }"
                    :prop="'projects.' + i + '.room_id'"
                >
                    <el-select
                    v-model="item.room_id"
                    @change="item.bed_id = ''"
                    :disabled="type == 2"
                    filterable
                    placeholder="请选择"
                    >
                    <el-option
                        v-for="val in roomList"
                        :key="val.id"
                        :label="val.room_number"
                        :value="val.id"
                    >
                    </el-option>
                    </el-select>
                </el-form-item> -->

                            <el-form-item
                                label="床位号"
                                :rules="{
                                    required: true,
                                    message: '请选择床位号',
                                    trigger: 'blur',
                                }"
                                :prop="'projects.' + i + '.bed_id'"
                            >
                                <div  class="el-select" @click="openRoom(i)">
                                    <div class="el-input el-input--suffix " >
                                        <input type="text" v-model="item.cName" autocomplete="off" placeholder="请选择" class="el-input__inner"
                                            readonly="readonly">
                                            <span class="el-input__suffix">
                                                <span class="el-input__suffix-inner">
                                                <i 
                                                class="el-select__caret el-input__icon el-icon-arrow-up"></i>
                                            </span>
                                            <!-- :class="{'is-reverse':drawer}" -->
                                        </span>
                                    </div>
                                </div>
                                <el-input style="display: none;" v-model="item.bed_id" placeholder=""></el-input>
                                <!-- <el-select
                                    v-model="item.bed_id"
                                    :disabled="type == 2"
                                    @click.native="drawer = true"
                                    filterable
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="val in bedList(item)"
                                        :key="val.id"
                                        :label="val.number"
                                        :value="val.id"
                                    >
                                    </el-option>
                                </el-select> -->
                            </el-form-item>

                            <el-form-item
                                label="性别"
                                :rules="{
                                    required: true,
                                    message: '请选择性别',
                                    trigger: 'change',
                                }"
                                :prop="'projects.' + i + '.gender'"
                            >
                                <el-radio-group
                                    size="small"
                                    :disabled="type == 2"
                                    v-model="item.gender"
                                >
                                    <el-radio :label="1">男</el-radio>
                                    <el-radio :label="2">女</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item
                                label="服务技师"
                                :rules="{
                                    required: true,
                                    message: '请选择服务技师',
                                    trigger: 'change',
                                }"
                                :prop="'projects.' + i + '.staff_id'"
                            >
                                <el-input v-if="item.staff" v-model="item.staff.name" readonly  placeholder=""></el-input>
                            </el-form-item>

                            <el-form-item
                                label="排钟类型"
                                :rules="{
                                    required: true,
                                    message: '请选择排钟类型',
                                    trigger: 'change',
                                }"
                                :prop="'projects.' + i + '.staff_type'"
                            >
                                <el-select
                                    v-model="item.staff_type"
                                    :disabled="type == 2"
                                    filterable
                                    placeholder="请选择"
                                >
                                    <el-option label="轮钟" :value="1">
                                    </el-option>
                                    <el-option label="点钟" :value="2">
                                    </el-option>
                                    <el-option label="加班1轮钟" :value="3">
                                    </el-option>
                                    <el-option label="加班1点钟" :value="4">
                                    </el-option>
                                    <el-option label="加班2轮钟" :value="5">
                                    </el-option>
                                    <el-option label="加班2点钟" :value="6">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item v-if="type != 2" label=" " prop="asd">
                                <el-button
                                    @click="
                                        ruleForm.projects.splice(i + 1, 0, {
                                            id: '',
                                            room_id: '',
                                            bed_id: '',
                                            gender: '',
                                            staff_id: '',
                                            staff_type: 2,
                                            cName:'',
                                        })
                                    "
                                    type="primary"
                                    >+ 新增项目信息</el-button
                                >
                                <el-button
                                    v-if="i != 0"
                                    @click="ruleForm.projects.splice(i, 1)"
                                    type="danger"
                                    >删除</el-button
                                >
                            </el-form-item>
                        </div>
                    </div>
                </div>

                <el-form-item label="商品名称：" prop="asd" class="goods-list">
                    <el-table :data="ruleForm.skus">
                        <el-table-column
                            prop="title"
                            label="商品名称"
                        ></el-table-column>
                        <el-table-column label="规格名" min-width="150">
                            <template slot-scope="scope">
                                {{ scope.row.sku_text }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="sale_price"
                            label="标准价"
                        ></el-table-column>
                        <el-table-column label="金额">
                            <template slot-scope="scope">
                                {{
                                    (
                                        scope.row.sale_price * scope.row.number
                                    ).toFixed(2)
                                }}
                            </template>
                        </el-table-column>
                        <el-table-column label="数量" width="140">
                            <template slot-scope="scope">
                                <span v-if="type == 2">{{
                                    scope.row.number
                                }}</span>
                                <el-input-number
                                    v-else
                                    v-model="scope.row.number"
                                    size="mini"
                                    :min="1"
                                    :max="scope.row.stock"
                                    :step="1"
                                    step-strictly
                                ></el-input-number>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed="right"
                            width="80"
                            v-if="type != 2"
                            label="操作"
                        >
                            <template slot-scope="scope">
                                <span
                                    class="tab-red-text"
                                    @click="
                                        ruleForm.skus.splice(scope.$index, 1)
                                    "
                                    >删除</span
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <div>
                    <el-form-item v-if="type != 2" label="" prop="asd">
                        <el-button @click="dialogVisible = true" type="primary"
                            >+购买商品</el-button
                        >
                    </el-form-item>
                </div>
            </el-form>
            <div class="vs-bottom-btns">
                <el-button @click="utils.backPage()">取消</el-button>
                <el-button
                    v-if="type == 1 || type == 3"
                    @click="submit(1)"
                    type="primary"
                    >保存</el-button
                >
                <el-button
                    v-else-if="type == 4"
                    @click="submit(2)"
                    type="primary"
                    >结账</el-button
                >
            </div>
        </div>
        <el-dialog
            title="购买商品"
            :visible.sync="dialogVisible"
            :before-close="handleClose"
            width="850px"
        >
            <el-form ref="dialog" :model="dialogGoods">
                <el-form-item label="商品：" prop="goods_id">
                    <el-select
                        v-model="dialogGoods.value"
                        clearable
                        filterable
                        @change="changeGoods"
                        multiple
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in goodsList"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品规格：" prop="username">
                    <el-table
                        ref="sku"
                        :data="dialogGoods.sku"
                        style="width: 800px"
                    >
                        <el-table-column
                            width="70px"
                            :selectable="checkboxSelect"
                            type="selection"
                        ></el-table-column>
                        <el-table-column
                            prop="title"
                            label="商品名称"
                        ></el-table-column>
                        <el-table-column label="规格名" min-width="150">
                            <template slot-scope="scope">
                                {{ scope.row.sku_text }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="sale_price"
                            label="标准价"
                        ></el-table-column>
                        <!-- <el-table-column label="金额">
                        <template slot-scope="scope">
                            {{scope.row.sale_price * scope.row.number}}
                        </template>
                    </el-table-column> -->
                        <el-table-column label=" " width="140">
                            <template slot-scope="scope">
                                <!-- <el-input-number size="mini" :min="1" :max="Number(scope.row.stock)" v-model="scope.row.number" :step="1" step-strictly></el-input-number> -->
                                <el-alert
                                    v-if="!scope.row.stock"
                                    title="库存不足"
                                    center
                                    type="error"
                                    :closable="false"
                                >
                                </el-alert>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose()">取 消</el-button>
                <el-button type="primary" @click="addGoods">确 定</el-button>
            </span>
        </el-dialog>

        <el-drawer
            title="选择床位"
            :visible.sync="drawer"
            direction="rtl"
            :size="600"
        >
            <!-- 房间状态图 -->
            <div class="room-status">
                <div class="room-top">
                    <div class="icon-bed-box">
                        <div class="bed-zi">
                            <img
                                src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/15/2x-7.png"
                                alt=""
                            />
                            <div>榻榻米</div>
                        </div>
                        <div class="bed-zi">
                            <img
                                src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/15/-132x.png"
                                alt=""
                            />
                            <div>精油床</div>
                        </div>
                        <div class="bed-zi">
                            <img
                                src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/15/2x-8.png"
                                alt=""
                            />
                            <div>足浴床</div>
                        </div>
                    </div>
                    <div class="color-box">
                        <div class="color-zi">
                            <div
                                style="background: hsla(162, 76%, 50%, 1)"
                            ></div>
                            <span>空闲中</span>
                        </div>
                        <div class="color-zi">
                            <div
                                style="background: hsl(215deg, 19%, 51%)"
                            ></div>
                            <span>已预约</span>
                        </div>
                        <div class="color-zi">
                            <div
                                style="background: hsla(5, 100%, 50%, 1)"
                            ></div>
                            <span>使用中</span>
                        </div>
                    </div>
                </div>
                <div class="room-soun">
                    <el-form label-width="75px" inline>
                        <el-form-item label="房间号">
                            <el-select
                                v-model="roomForm.room_id"
                                style="width: 180px"
                                filterable
                                clearable
                                @change="getTimeNode"
                                placeholder="请选择"
                            >
                                <el-option 
                                v-for="item in roomList"
                                :key="item.id"
                                :label="item.room_number" 
                                :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="床位类型">
                            <el-select
                                v-model="roomForm.type"
                                @change="getTimeNode"
                                style="width: 180px"
                                filterable
                                clearable
                                placeholder="请选择"
                            >
                                <el-option label="榻榻米" :value="0">
                                </el-option>
                                <el-option label="精油床" :value="1">
                                </el-option>
                                <el-option label="足浴床" :value="2">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="床位状态">
                            <el-select
                                v-model="roomForm.use_status"
                                style="width: 180px"
                                filterable
                                clearable
                                @change="getTimeNode"
                                placeholder="请选择"
                            >
                                <el-option label="空闲" :value="0"> </el-option>
                                <el-option label="使用中" :value="1"> </el-option>
                                <el-option label="预约" :value="2"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="room-bottom">
                    <!-- 选择房间 -->
                    <div 
                    class="room-box" 
                    v-loading="loadingRoom">
                        <div
                            class="room-chin"
                            v-for="(item, index) in roomStatusList.bed"
                            @click="choiceRoom(item)"
                            :class="['leisure', 'use', 'make'][item.use_status]"
                            :key="index"
                            :title="item.room.room_number+'-'+item.number"
                        >
                            <div class="tt">
                                {{item.room.room_number}} -
                                {{item.number}}
                            </div>
                            <!-- icon-a-bianzu4 icon-a-bianzu13 icon-a-bianzu5  -->

                            <svg
                                v-if="item.type == 2"
                                t="1636706364614"
                                class="icon"
                                viewBox="0 0 1654 1024"
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                p-id="5046"
                                width="41"
                                height="18"
                            >
                                <path
                                    :fill="iconColor[item.use_status]"
                                    d="M1370.011 723.075c-61.043 127.876-77.112 184.903-92.274 192.189H671.399a120.393 120.393 0 0 1-6.223-0.512c-72.228-8.35-124.056-74.67-115.785-148.08 0.078-75.221 53.285-137.84 124.174-151.388 521.98 15.517 489.883-157.65 537.379-231.492 68.526-152.687 168.243-333.376 272.608-379.02 7.876-2.206 15.99-3.624 24.063-4.293 74.827-6.262 140.32 50.292 146.464 126.34a753946.33 753946.33 0 0 1-277.924 583.22l-6.144 13.036z m-112.241 218.26H590.585a41.313 41.313 0 1 0 0 82.625h667.264a41.313 41.313 0 0 0 0-82.625zM338.18 688.497H126.025A126.025 126.025 0 0 0 0 814.522v78.412a126.025 126.025 0 0 0 126.025 126.025h212.116a126.025 126.025 0 0 0 126.025-126.025v-78.412a126.025 126.025 0 0 0-126.025-126.025z"
                                    p-id="5047"
                                ></path>
                                <path
                                    :fill="iconColor[item.use_status]"
                                    d="M1212.992 393.835H992.448A126.025 126.025 0 0 0 866.423 519.86v63.012a126.025 126.025 0 0 0 126.025 126.025h220.544a126.025 126.025 0 0 0 126.025-126.025V519.86a126.025 126.025 0 0 0-126.025-126.025z"
                                    p-id="5048"
                                ></path>
                            </svg>
                            <i
                                v-else
                                class="iconfont"
                                :class="roomIcon[item.type]"
                            ></i>
                            <!-- <img :src="beds[Math.floor(Math.random()*3)]" alt="" srcset=""> -->
                        </div>
                    </div>
                    <el-empty v-if="roomStatusList.bed&&roomStatusList.bed.length==0" description="暂时可用床位"></el-empty>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
export default {
    data() {
        return {
            beds: [
                "https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/15/2x-7.png",
                "https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/15/-132x.png",
                "https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/15/2x-8.png",
            ],
            roomIcon: ["icon-a-bianzu4", "icon-a-bianzu13", "icon-a-bianzu5"],
            iconColor: [
                "hsla(162, 76%, 50%, 1)",
                " hsla(5, 100%, 50%, 1)",
                " hsl(215deg,19%,51%)",
            ],
            drawer: false,
            vasss: "",
            // roomStatusList: [],
            store_id:'',
            dialogVisible: false,
            dialogVisible2: false,
            loading: false,
            tableData: [],
            isBtn: false,
            title: "添加订单",
            order_id: "",
            type: 1, //1添加     2详情   3编辑   4结账
            ruleForm: {
                user_id: "", //	预约单的用户id
                username: "", //	用户名
                gender: "", //性别
                phone: "", //手机号
                user_num: 1, //客户人数
                projects: [
                    {
                        id: "",
                        room_id: "",
                        bed_id: "",
                        gender: "",
                        staff_id: "",
                        staff_type: "",
                        cName:'',
                    },
                ],
                skus: [],
            },
            dialogGoods: {
                value: "",
                sku: [],
            },
            dataList: [],
            user: {},
            projectList: [],
            roomList: [],
            techList: [],
            goodsList: [],
            ints: -1,
            rules: {
                username: {
                    required: true,
                    message: "请输入顾客姓名",
                    trigger: "blur",
                },
                gender: {
                    required: true,
                    message: "请选择性别",
                    trigger: "change",
                },
                phone: {
                    required: true,
                    message: "请输入手机",
                    trigger: "blur",
                },
                mode: {
                    required: true,
                    message: "请选择预约方式",
                    trigger: "change",
                },
                date: {
                    required: true,
                    message: "请选择日期",
                    trigger: "blur",
                },
                time: {
                    required: true,
                    message: "请选择时间",
                    trigger: "blur",
                },
                advance_amount: {
                    required: true,
                    message: "请输入预付金额",
                    trigger: "blur",
                },
                number: {
                    required: true,
                    message: "请输入预约人数",
                    trigger: "blur",
                },
            },
            roomForm: {
                date: "",
                room_id: "",
                type: "",
                use_status: "",
            },
            activeTiem:'',//选择的时间点
            dayList: [],
            hourList: [],
            roomArr:[],
            loadingRoom:false,//选择房间加载
            prIndex:0,
        };
    },
    created() {
        let { title = "添加订单", id, type = 1 ,store_id} = this.$route.query;
        if (title) {
            this.$route.meta.title = title;
            this.title = title;
            this.type = type;
            this.store_id = store_id;
        }
        if (id) {
            this.order_id = id;
            this.getOrders(id);
        }
        // this.changeProj();
        // this.getTech();
        this.getProject();
        this.getGoods();
        // this.timeInit();
        console.log(this.$route,'@@@@');
    },
    computed:{
        roomStatusList(){
            return this.roomArr.find(v=>v.time == this.activeTiem)||{};
        }
    },
    methods: {
        openRoom(i){
            if(this.type == 2)return;
            this.prIndex=i;
            this.drawer = true
        },
        choiceRoom(item){
            if(item.use_status==0){
                let obj = this.ruleForm.projects[this.prIndex];
                obj.room_id = item.room.id;
                obj.bed_id = item.id;
                obj.cName = item.room.room_number+' - '+item.number;
                this.drawer = false;
                this.$set(this.ruleForm.projects,this.prIndex,obj);
            }
        },
        async getTimeNode(){
            this.loadingRoom = true;
            let {code,data} = await this.$Http.getTimeNode(this.roomForm);
            this.loadingRoom = false;
            let date = new Date();
            if(code){
                let arr = [];
                data.forEach(v=>{
                    if(new Date(this.roomForm.date)>date){
                        for(let val of v.bed){
                            if(val.use_status==1)val.use_status=0;
                        }
                    }
                    if(date < new Date(`${this.roomForm.date} ${v.time}:00`)){
                        arr.push(v)
                    }
                })
                this.roomArr = arr;
                this.activeTiem = this.roomArr.length?this.roomArr[0].time:'';
            }
        },
        async changeDay(item){
            this.roomForm.date = item.val;
            await this.getTimeNode();
        },
        async timeInit() {
            let date = new Date();
            this.roomForm.date = this.utils.dateFormat( "Y-m-d", date);
            await this.getTimeNode();
        },
        phoneBlur() {
            let phone = this.ruleForm.phone;
            if (!phone) return (this.user = {});
            clearTimeout(this.ints);
            this.ints = setTimeout(async () => {
                let { code, data } = await this.$Http.getUserByPhone({ phone });
                if (code && data) {
                    this.user = data;
                    this.ruleForm.username = data.username;
                    this.ruleForm.gender = data.gender;
                    this.ruleForm.phone = data.phone;
                } else this.user = {};
            }, 500);
        },
        checkboxSelect(row, rowIndex) {
            for (let j of this.ruleForm.skus) {
                if (row.id == j.id) {
                    return false;
                }
            }
            return row.stock;
        },
        addGoods() {
            // this.ruleForm.skus.push(...this.$refs.sku.store.states.selection);
            this.ruleForm.skus.push(
                ...JSON.parse(
                    JSON.stringify(this.$refs.sku.store.states.selection)
                )
            );
            this.handleClose();
        },
        async getGoods() {
            let { code, data } = await this.$Http.getGoods({
                is_all: 1,
                is_store: 1,
            });
            if (code) {
                this.goodsList = data;
            }
        },
        changeGoods(e) {
            let list = [];
            this.goodsList.filter((v) => {
                for (let val of e) {
                    if (val == v.id) {
                        v.sku.forEach((v2) => {
                            v2["number"] = 1;
                            v2.title = v.title;
                            // 暂
                        });
                        list.push(...v.sku);
                    }
                }
            });
            this.dialogGoods.sku = list;
        },
        submit(type) {
            if (type == 2) {
                this.utils.goUrl("/settle");
                return;
            }
            this.$refs["ruleForm"].validate(async (valid) => {
                if (!valid) return;
                let obj = { ...this.ruleForm };
                console.log(obj.projects, "obj.projects");
                obj.projects.forEach((v) => {
                    // v.staff_id=1
                    // v.project_id+="";
                    // v.id = v.project_id;
                });
                obj.user_id = this.user.id;
                obj.projects = JSON.stringify(obj.projects);
                obj.skus = JSON.stringify(
                    obj.skus.map((v) => {
                        return {
                            sku_id: v.id,
                            number: v.number,
                        };
                    })
                );
                console.log(obj, "@@@@@");

                let { code, data } = await this.$Http.setOrders(obj);
                if (code) {
                    this.utils.backPage();
                    this.$message.success(
                        obj.id ? "修改订单成功" : "添加订单成功"
                    );
                }
            });
        },
        bedList(item) {
            let obj = this.roomList.find((v) => v.id == item.room_id);
            if (obj) return obj.bed;
            return [];
        },
        async changeProj(e, item) {
            //房间
            // item.room_id = "";
            // item.bed_id = "";
            let { code, data } = await this.$Http.getRoom({
                limit:999999
                // date:this.$moment().format('YYYY-MM-DD'),
                // time:this.$moment().format('HH:mm:ss'),
                // order_id: this.order_id,
                // project_ids:e+""
            });
            if (code) {
                this.roomList = data.data||[];
            }
        },
        async getTech() {
            let { code, data } = await this.$Http.getTech({
                order_id: this.order_id,
            });
            if (code) {
                this.techList = data;
            }
        },
        async getProject() {
            let { code, data } = await this.$Http.getProject();
            if (code) {
                this.projectList = data.data;
            }
        },
        async getOrders(id) {
            //订单详情
            this.loading = true;
            let { code, data } = await this.$Http.ordersgetOrders({
                is_market: 0,
                id,store_id:this.store_id
            });
            this.loading = false;
            if (code) {
                // data = data.data.length?data.data[0]:{};
                if(data.user){
                    this.ruleForm.user_id = data.user.id;
                    this.ruleForm.username = data.user.username;
                    this.ruleForm.phone = data.user.phone;
                    this.ruleForm.gender = data.user.gender;
                    this.user = data.user;
                }
                this.ruleForm.user_num = data.user_num;
                this.ruleForm.id = data.id;
                data.project.forEach((v) => {
                    v.id = v.project.id;
                    if(v.room) v.cName = v.room.room_number +' - '+ v.bed.number;
                    if (!v.staff_type) v.staff_type = "";
                    if (!v.staff_id) v.staff_id = "";
                    if (!v.room_id) v.room_id = "";
                    if (!v.bed_id) v.bed_id = "";
                });
                this.ruleForm.projects = data.project;
                this.ruleForm.skus = data.goods.map((v) => {
                    v.title = v.goods_name;
                    v.id = v.sku_id;
                    return v;
                });
                console.log(this.ruleForm, "this.ruleForm");
            }
        },
        handleClose(dom) {
            dom && dom();
            this.dialogVisible = false;
            this.dialogGoods = this.$options.data().dialogGoods;
        },
        setAd() {},
    },
};
</script>
<style lang="scss" scoped>
.el-input {
    width: 200px;
}
::v-deep {
    .asdws {
        .el-form-item__content {
            flex: 1;
        }
    }
}
.project-list {
    display: flex;
    flex-wrap: wrap;
    > div {
        // width: 360px;
    }
    ::v-deep {
        .el-form-item__content {
            // width: 210px;
        }
    }
}
.goods-list {
    ::v-deep {
        .el-form-item__content {
            width: 800px;
        }
    }
}

.form-top {
    display: flex;
    ::v-deep {
        .el-form-item__content {
            width: 200px;
        }
    }
}
.leisure {
    background-color: hsla(162, 76%, 50%, 0.1);
    color: hsla(162, 76%, 50%, 1);
}
.make {
    background-color: hsla(218, 36%, 96%);
    color: hsl(215deg, 19%, 51%);
}
.use {
    background-color: hsla(5, 100%, 50%, 0.1);
    color: hsla(5, 100%, 50%, 1);
}
.room-status {
    flex: 1;
    // margin-left: 150px;
    // border: 1px solid #828282;
    padding: 10px;
    border-radius: 20px;
    // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    .room-top {
        display: flex;
        // justify-content: end;
        .icon-bed-box {
            margin-left: 20px;
            display: flex;
            height: 40px;
            align-items: center;
            .bed-zi {
                line-height: 20px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                text-align: center;
                margin: 0 10px;
                color: #414040;
                font-size: 14px;
                img {
                    width: 41px;
                    height: 20px;
                    object-fit: scale-down;
                }
                > div {
                    margin-top: 4px;
                }
                .iconfont {
                    line-height: 25px;
                    font-size: 20px;
                    color: #828282;
                }
            }
        }
        .color-box {
            display: flex;
            height: 40px;
            align-items: center;
            .color-zi {
                display: flex;
                // margin: 5px 0;
                height: 25px;
                align-items: center;
                margin-left: 20px;
                div {
                    width: 15px;
                    height: 15px;
                    margin-right: 5px;
                }
            }
        }
    }
    .room-soun {
        margin-top: 20px;
        ::v-deep .el-form {
            // display: flex;
            // justify-content: end;
            // flex-wrap: wrap;
        }
    }
    .active-time{
        background: #e6f7ff;
        color: #409eff;
    }
    .room-bottom {
        display: flex;
        height: 700px;
        .time-box {
            display: flex;
            > div {
                overflow-y: overlay;
                height: 100%;
                 padding-bottom: 10px ;
                > div {
                    min-width: 100px;
                    padding: 0 20px;
                    height: 40px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    white-space: nowrap;
                    cursor: pointer;
                    transition: all 0.3s;
                    &:hover {
                        background: #e6f7ff;
                        color: #409eff;
                    }
                }
            }
            .day-select {
            }
            .hour-select {
            }
        }
    }

    .room-box {
        margin-left: 10px;
        display: flex;
        flex-wrap: wrap;
        grid-column-gap: 15px;
        grid-row-gap: 15px;
        height: max-content;
        // min-height: 400px;
        .room-chin {
            padding: 10px;
            text-align: center;
            // margin-bottom: 15px;
            // margin-right: 15px;
            line-height: 24px;
            cursor: pointer;
            transition: all 0.3s;
            &:hover {
                transform: scale(1.2);
                box-shadow: #ffffff 1px -1px 6px 4px;
                // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12),
                    0 0 6px rgba(0, 0, 0, 0.04);
            }
            .iconfont {
                font-size: 14px;
            }
            img {
                width: 60px;
                object-fit: cover;
            }
        }
    }
}
</style>